<template>
  <!-- 列表模块 -->
  <div v-if="showValue">
    <div style="padding: 20px">
      <!-- 表单 -->
      <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState">
        <!--  :rules="[{ required: true, message: '请输入表单名称' }]"-->
        <a-row :gutter="24">
          <a-col :span="7">
            <a-form-item name="formName" label="表单名称">
              <a-input v-model:value="formState.formName" placeholder="请输入表单名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item name="formStatus" label="表单状态">
              <a-select v-model:value="formState.formStatus" :options="options1" placeholder="请输入表单状态"></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item name="opePerson" label="操作人">
              <a-input v-model:value="formState.opePerson" placeholder="请输入操作人"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="3">
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <MyTable ref="myTable" :data="handleTableData" :columns="columns" :attachButtons="attachButtons">
        <template #column-tags="{ record }">
          <a-tag v-for="tag in record.tags" :key="tag">
            {{ tag.toUpperCase() }}
          </a-tag>
        </template>
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'tags'">
            测试表头(列插槽)
          </template>
        </template>
      </MyTable>
    </div>
    <!-- 新增/编辑弹框  -->
    <addEdit @handleOk="handleOk" @handleCancel="handleCancel" :testContent2="testContent2" :title="testContent2.title"
      :isShowModal="testIsShowModal"></addEdit>
  </div>
  <!-- 开发模块 -->
  <div v-else>
    <p>{{ currentRow.formName }}</p>

    <div class="titleRow">
      <div class="flex-left">
        <p>{{ currentRow.formDesc }}</p>
      </div>
      <div class="flex-right">
        <a-button type="primary" @click="handleEditForm">表单配置</a-button>
        <a-button type="primary" style="margin-left: 20px" @click="handleSave">
          保存
        </a-button>
        <a-button style="margin-left: 10px" @click="goBack">返回</a-button>
      </div>
    </div>
    <!-- tabn内容 -->
    <tabsContent></tabsContent>
  </div>
</template>

<script setup>
import MyTable from '../../../../components/table.vue'
import tabsContent from './components/tabsContent.vue'
import { reactive, ref, watch } from 'vue'
// import { useRouter } from 'vue-router'
import { getRemoteTableData } from '../../../../components/utils'
import addEdit from './components/addEdit.vue'
import { h } from 'vue'
// let router = useRouter()
const currentRow = ref({})
let showValue = ref(true)
///定义表单
const formRef = ref()
const formState = reactive({
  formName: '',
  formStatus: '',
  opePerson: '',
})
const options1 = ref([
  {
    value: 'lucy',
    label: 'Lucy',
  },
])
//定义功能按钮
const attachButtons = ref([
  {
    name: '新增',
    show: true,
    isDisabled: false,
    onclick: ({ selectedRowKeys }) => {
      //打开新增弹框
      handleAddEdit('新增')

        console.log('新增', selectedRowKeys)
      },
    },
    {
      name: '批量删除',
      show: true,
      isDisabled: (selectedRowKeys) => !selectedRowKeys.length,
      onclick: ({ selectedRowKeys }) => {
        console.log('批量删除', selectedRowKeys)
        // if (!selectedRowKeys.length) {
        //   console.log(11);
        //  return '<a-alert message="Warning" type="warning" show-icon />'
        // }
      },
      props: {
        type: 'primary',
        danger: true,
      },
    },
    {
      name: '导出Excel',
      show: false,
      isDisabled:false,

    onclick: () => {
      console.log('导出文件')
    },
    props: {
      type: 'primary',
    },
  },
])
//定义表格
const myTable = ref(null)
const columns = [
  {
    title: '序号',
    dataIndex: 'xuhao',
    key: 'serial',
  },
  {
    title: '表单名称',
    dataIndex: 'formName',
    key: 'formName',
  },
  {
    title: '表单描述',
    dataIndex: 'formDesc',
    key: 'formDesc',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    //       customRender: ({ record }) => {
    // return h(<div>
    //             <a style="color: green"> {record.status} </a>
    //           </div>)}


  },
  {
    title: '最后更新时间',
    dataIndex: 'lastTime',
    key: 'lastTime',
  },
  {
    title: '操作人',
    dataIndex: 'opePerson',
    key: 'opePerson',
  },
  // {
  //   title: "自定义渲染列",
  //   dataIndex: "custom",
  //   customRender: ({record}) => <div><a>{record.name} </a><span style="color: green">年龄：{record.age}</span></div>
  // },
  {
    title: '操作',
    dataIndex: 'operation',
    buttons: [
      {
        name: '编辑',
        onclick: ({ record }) => {
          //打开编辑弹框
          handleAddEdit('编辑', record)
          console.log('编辑', record)
        },
        show: true,
        isDisabled: ({ record }) => {
          return record.status === '已启用'
        },
      },
      {
        name: '开发',
        onclick: ({ record }) => {
          showValue.value = false
          currentRow.value = record
        },
        show: true,
        isDisabled: ({ record }) => {
          return record.status === '已启用'
        },
      },
      {
        name: '预览',
        onclick: ({ record }) => {
          showValue.value = false
          currentRow.value = record
        },
        show: true,
        isDisabled: ({ record }) => {
          return record.status === '未启用'
        },
      },
      {
        name: '复制',
        onclick: ({ record }) => {
          //打开复制弹框
          handleAddEdit('复制', record)
        },
        show: true,
        isDisabled: false,
      },
      {
        name: '启用',
        onclick: ({ record }) => {
          console.log('启用', record)
        },
        show: ({ record }) => {
          return record.status === '已启用'
        },
        isDisabled: ({ record }) => {
          return record.status === '已启用'
        },
      },
      {
        name: '发布',
        onclick: ({ record }) => {
          handlePublish('发布', record)
        },
        show: ({ record }) => {
          return record.status === '未启用'
        },
        isDisabled: false,
      },
      {
        name: '停用',
        onclick: ({ record }) => {
          console.log('停用', record)
        },
        show: true,
        isDisabled: ({ record }) => {
          return record.status === '未启用'
        },
      },
      {
        name: '删除',
        onclick: ({ record }) => {
          handleDelete('删除', record)
        },
        show: true,
        isDisabled: ({ record }) => {
          return record.status === '已启用'
        },
        // style: {
        //   color: 'red',
        // },
      },
    ],
    width: 340,
  },
]
//定义弹框
const testContent2 = ref({
  isShowModal: false,
  title: '',
  contentList: [],
})
const testIsShowModal = ref(false)
//新增/编辑/复制 弹框
const handleAddEdit = (flag, row) => {
  testContent2.value.contentList = [
    {
      id: 1,
      type: 'form',
      isCheck: false,
      rules: {
        formName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
        ],
      },
      bindData: {
        formName: row ? row.formName : '', //初始值
        formDesc: row ? row.formDesc : '', //初始值
      },
      contentItemList: [
        // {
        //   type: 'select',
        //   key: 'formName',
        //   label: '应用名称',
        //   options: [
        //     {
        //       label: '待申请',
        //       value: '待申请'
        //     },
        //     {
        //       label: '已申请',
        //       value: '已申请'
        //     },
        //     {
        //       label: '已编码',
        //       value: '已编码'
        //     },
        //   ]
        // }
        {
          type: 'input',
          key: 'formName',
          label: '应用名称',
        },
        {
          type: 'textarea',
          key: 'formDesc',
          label: '应用描述',
        },
      ],
    },
  ]
  testContent2.value.isShowModal = true
  testContent2.value.title = flag
}
//发布弹框
const handlePublish = (flag, row) => {
  testContent2.value.title = flag
  testContent2.value.contentList = [
    {
      id: 2,
      type: 'publish',
      text: '确认要发布该表单？发布后将在采集表单列表中展示',
    },
  ]
  testContent2.value.isShowModal = true
}
//删除弹框
const handleDelete = (flag, row) => {
  testContent2.value.title = flag
  testContent2.value.contentList = [
    {
      id: 3,
      type: 'delete',
      text: '删除后数据不能恢复，是否确认删除？',
    },
  ]
  testContent2.value.isShowModal = true
}
// 点击确定后
const handleOk = () => {
  testContent2.value.isShowModal = false
}

// 点击取消后
const handleCancel = () => {
  testContent2.value.isShowModal = false
}
//获取表格
const handleTableData = async () => {
  let getData = [
    {
      id: 1,
      key: '1',
      formName: '坦克信息管理系统',
      formDesc: '这是一段应用描述+',
      status: '已启用',
      lastTime: '2023-09-06 18:06:06',
      opePerson: 'yzk',
    },
    {
      id: 2,
      key: '2',
      formName: 'XXXX管理系统',
      formDesc: '这是一段应用描述',
      status: '未启用',
      lastTime: '2024-04-06 18:06:09',
      opePerson: 'zjf',
    },
  ]
  //调接口
  return await getRemoteTableData([...getData])
}
//去编辑表单
const handleEditForm = () => { }
//保存表单
const handleSave = () => { }
//返回
const goBack = () => {
  showValue.value = true
}
</script>
<style scoped>
.titleRow {
  display: flex;
  justify-content: space-between;
}

.flex-left {}

.flex-right {}
</style>
